<template>
	<view>
		<Header :showBack="canBack" title="数据维护"></Header>
		
		<view class="form">
			<view v-for="(item,index) in list" :key="index">
				<view>{{item.name}}:</view>
				<view @click="showSelector(index)">
					<!-- <picker style="width: 100%; height: 100%;" mode="selector" range-key="name" :range="item.list" @change="change($event,index)">
						<view style="width: 100%;height: 100%;line-height: 60upx;">{{item.value}}</view>
					</picker> -->
						<view style="width: 100%;height: 100%;line-height: 60upx;">{{item.value}}</view>
				</view>
			</view>
			
			<view>
				<view>姓名</view>
				<view>
					<input style="width: 100%; height: 100%;" type="text" v-model="childName" placeholder="请输入姓名或者别名"/>
				</view>
			</view>
		</view>
		
		
		<button open-type='getPhoneNumber' @getphonenumber="summit" type="default">提交</button>
		
		
		<view v-if="!canBack" class="beizhu">
			备注：在系统中不存在的会员数据，在此输入相关信息进行新增操作，以匹配微信代扣数据。
		</view>
		
		
		<view v-show="show" class="zzc" @click.stop="close">
			<view @click.stop="">
				
				<view class="btn">
					<view @click="close">
						取消
					</view>
					<view @click="choose" style="color: #007AFF;">
						确定
					</view>
				</view>
				
				<view class="search">
					<input type="text" value="" v-model="word" placeholder="搜索" />
				</view>
				
				
				<view class="box">
					<picker-view class="picker-area" @pickstart="disable=true" @pickend="disable=false" @change="changeX">
						<picker-view-column>
							<view class="item" v-if="item.name?item.name.includes(word):false" v-for="(item,index) in list[curIndex].list" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
		
		<!-- <view @click="goCard" style="background-color: rgb(7,193,96);" class="button">
			添加会员卡
		</view> -->
		
	</view>
</template>

<script>
	var WXBizDataCrypt = require('@/utils/RdWXBizDataCrypt.js');
	export default {
		data() {
			return {
				word:'',
				show:false,
				appId:getApp().globalData.appId,
				sessionkey:uni.getStorageSync('sk'),
				canBack:false,
				childName:'',
				isGZH:0,
				urlList:[
					'/common/api/area/getProvinceList',
					'/common/api/area/getCityList',
					'/common/api/area/getAreaList',
					'/member/api/organization/list',
					'/member/api/organization/list'
				],
				curIndex:0,
				changeIndex:0,
				list:[
					// {
					// 	name:'省',
					// 	value:'请选择',
					// 	list:[],
					// 	changeId:''
					// },
					// {
					// 	name:'市',
					// 	value:'请选择',
					// 	list:[{}],
					// 	changeId:''
					// },
					// {
					// 	name:'区',
					// 	value:'请选择',
					// 	list:[],
					// 	changeId:''
					// },
					// {
					// 	name:'学校',
					// 	value:'请选择',
					// 	list:[],
					// 	changeId:''
					// },
					{
						name:'班级',
						value:'请选择',
						list:[],
						changeId:''
					}
				],
				disable:false,
				organizationId: '',
				classId: '',
				className: '',
				organizationName: '',
			}
		},
		onLoad(e) {
			if(e.canBack==1){
				this.canBack=true
			}
			if(e.isGZH==1){
				this.isGZH = 1
			}
			this.organizationId = e.orId
			this.organizationName = e.organizationName
			this.getList(0)
		},
		methods: {
			close(){
				if(this.disable) return;
				this.show = false
			},
			choose(){
				if(this.disable) return;
				if(this.word){
					let nameList = this.list[this.curIndex].list.map((item)=>{
						return item.name;
					})
					let searchList = nameList.filter((item)=>{
						if(item.includes(this.word)){
							return item
						}
					})
					if(searchList.length>0){
						
						this.change(nameList.indexOf(searchList[this.changeIndex]))
					}
				}else{
					this.change(this.changeIndex)
				}
				this.show = false
			},
			changeX(e){
					if(this.changeIndex != e.detail.value[0]){
						this.changeIndex = e.detail.value[0]
					}
				this.disable = false
			},
			showSelector(index){
				if(this.curIndex != index){
					this.word = '随便写个什么反正是重置picker-view'
					
					this.$nextTick(()=>{
						this.curIndex = index
						this.word = ''
					})
				}
				
				this.$nextTick(()=>{
					this.show = true
				})
			},
			change(x){
				if(this.list[this.curIndex].list.length>0){
					this.list[this.curIndex].value=this.list[this.curIndex].list[x].name
					this.list[this.curIndex].changeId=this.list[this.curIndex].list[x].id
					
					for(let i=this.curIndex+1;i<this.list.length;i++){
						this.list[i].value='请选择'
						this.list[i].changeId=''
					}
					if(this.curIndex!=4){
						this.getList(this.curIndex+1)
					}
				}
			},
			getList(index){
				// if(index>0&&this.list[index-1].changeId=='') return;
				// let data,name
				// switch (index){
				// 	case 0:data={"condition":{}} , name='provinceName'
				// 		break;
				// 	case 1:data={"condition":{"fatherID":this.list[0].changeId}} , name='cityName'
				// 		break;
				// 	case 2:data={"condition":{"fatherID":this.list[1].changeId}} , name='areaName'
				// 		break;
				// 	case 3:data={"condition":{"areaId":this.list[2].changeId,"isOrganization":true}} , name='organizationName'
				// 		break;
				// 	case 4:data={"condition":{"parentId":this.list[3].changeId}} , name='organizationName'
				// 		break;
				// 	default:
				// 		break;
				// }
				// this.$http(this.urlList[index],data,res=>{
				// 	if(res.data.items.length>0){
				// 		let arr=[]
				// 		 res.data.items.forEach((item)=>{
				// 			arr.push({
				// 				name: item[name],
				// 				id:item.id
				// 			})
				// 		})
				// 		arr.unshift({
				// 			name:'请选择',
				// 			id:''
				// 		})
				// 		this.list[index].list = arr
				// 	}
				// })
				let data ={"condition":{"parentId":this.organizationId}}
				this.$http('/member/api/organization/list',data,res=>{
					if(res.data.items.length>0){
								let arr=[]
								 res.data.items.forEach((item)=>{
									arr.push({
										name: item['organizationName'],
										id:item.id
									})
								})
								arr.unshift({
									name:'请选择',
									id:''
								})
								this.list[index].list = arr
					}
				})
				this.classId = this.list[0].changeId
				this.className = this.list[0].value
			},
			goCard(){
				uni.navigateTo({
					url:'/pages/addCard/addCard'
				})
			},
			summit(e){
				let that = this
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){
				}else{
					var pc = new WXBizDataCrypt(this.appId, this.sessionkey);
					var data = pc.decryptData(e.detail.encryptedData, e.detail.iv)
					this.$http('/minprogram/api/member/getStudentInfo',{
						// schoolId:this.list[3].changeId,
						schoolId:this.organizationId,
						gradeId:this.classId,
						// gradeId:this.list[4].changeId,
						ownerName:this.childName.trim()
					},res=>{
						if(res.data.phone){
							if(res.data.phone == data.phoneNumber){
								uni.showToast({
									title:'请勿重复添加',
									icon:'none'
								})
							}else{
								if(res.data.isSign){
									uni.showToast({
										title:'该学生已签约',
										icon:'none'
									})
								}else{
									uni.showModal({
									    content: '抱歉~该学生绑定号码与本机号码不一致，建议使用资料中预留号码开通，或自行修改号码。',
										cancelText:'我知道了',
										confirmText:'立即修改',
									    success: function (suc) {
									        if (suc.confirm) {
												uni.navigateTo({
													url:`/pages/changePhone/changePhone?oldPhone=${res.data.phone}&newPhone=${data.phoneNumber}&ownerName=${that.childName.trim()}&gradeId=${that.classId}&organizationId=${that.schoolId}&id=${res.data.id}&schoolName=${that.organizationName}&className=${that.className}&isGZH=${that.isGZH}`
												})
								
									        } else if (suc.cancel) {
									        }
									    }
									});
								}
								
							}
						}else{
							this.$http('/minprogram/api/member/saveOwnerStudent',{
								"ownerName": this.childName.trim(),
								// "organizationId": this.list[3].changeId,
								// "gradeId": this.list[4].changeId,
								"organizationId":this.organizationId,
								"gradeId":this.classId,
							},res1=>{
								if(res1.data.value){
									
									if(this.isGZH == 1){
										uni.reLaunch({
											url:'/pages/niuniuIndex/niuniuIndex?type=2'
										})
									}else{
										uni.reLaunch({
											url:'/pages/index/index?type=2'
										})
									}
								}
							})
						}
					},'GET')
				}

			}
		}
	}
</script>

<style scoped lang="less">
.form{
	width: 700upx;
	margin: 20upx auto;
	background-color: #FFFFFF;
	border-radius: 8upx;
	padding: 40upx 0;
	>view{
		width: 100%;
		display: flex;
		height: 100upx;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		>view:first-child{
			line-height: 100upx;
			height: 100upx;
			width: 100upx;
		}
		>view:last-child{
			width: 460upx;
			height: 60upx;
			border: 1upx solid #cccccc;
			
			padding: 0 20upx;
		}
	}
}
button{
	background-color: #2BAC6B;
	width: 90%;
	height: 96upx;
	line-height: 96upx;
	text-align: center;
	color: #FFFFFF;
	font-size: 30upx;
	margin: 30upx auto;
	border-radius: 10upx;
}
.button{
		width: 90%;
		height: 96upx;
		line-height: 96upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		margin: 30upx auto;
		border-radius: 10upx;
	}
.zzc{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	background-color: rgba(0,0,0,0.4);
	z-index: 100;
	>view{
		width: 100%;
		height: 700upx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		>view.btn{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			// border-bottom: 1upx solid #dddddd;
			>view{
				height: 100%;
				width: 160upx;
				font-size: 24upx;
				line-height: 80upx;
				text-align: center;
				color: #999999;
			}
		}
		>view.search{
			width: 100%;
			>input{
				background-color: #eeeeee;
				width: 90%;
				margin: 0 auto;
				height: 70upx;
				border-radius: 10upx;
				text-align: center;
			}
		}
		>view.box{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 20upx 0;
			// overflow: auto;
			// >view{
			// 	width: 100%;
			// 	text-align: center;
			// 	height: ;
			// }
			.picker-area{
			        width: 100%;
			        height: 100%;
					text-align: center;
			    }
			.item{
				line-height: 34px;
			}
		}
	}
}
.beizhu{
	width: 100%;
	font-size: 24upx;
	color: #999999;
	box-sizing: border-box;
	padding: 50upx;
	text-align: center;
}
</style>
